new Vue({
    el:'#app',
    data:{
        blocknum:3,
        pagenumlist:"7,0,1,2,0,3,0,4,2,3,0,3,2,1,2,0,1,7,0,1",
        pagelist:[],
        fifoblocknumlist:[],
        lrublocknumlist:[],
        lfublocknumlist:[],
        optblocknumlist:[],
        counts:[0,0,0,0],
        timespan:1.5,
        lruvisitinfo:"",
        lruvisitinfo2:"",
        fifovisitinfo:"",
        fifovisitinfo2:"",
        optvisitinfo:"",
        optvisitinfo2:"",
        lfuvisitinfo:"",
        lfuvisitinfo2:"",
    },
    created(){
        this.pagelist = this.pagenumlist.split(",")
        for(let i = 0; i < this.pagelist.length; i++){
            this.pagelist[i] = parseInt(this.pagelist[i])
        }
        for (let i = 0; i < this.blocknum; i++){
            this.fifoblocknumlist.push("")
            this.lrublocknumlist.push("")
            this.lfublocknumlist.push("")
            this.optblocknumlist.push("")
        }



    },
    mounted(){},
    watch:{
        'blocknum'(newName,oldName){
            let memoryblocks = document.getElementsByClassName("memory")
            for(let memory of memoryblocks){
                memory.innerHTML = ""
            }
            this.fifoblocknumlist = []
            this.lrublocknumlist = []
            this.lfublocknumlist = []
            this.optblocknumlist = []

            for (let i = 0; i < this.blocknum; i++){
                this.fifoblocknumlist.push("")
                this.lrublocknumlist.push("")
                this.lfublocknumlist.push("")
                this.optblocknumlist.push("")
            }
        },
        'pagenumlist'(newName,oldName){
            this.pagelist = newName.split(",")
            for(let i = 0; i < this.pagelist.length; i++){
                this.pagelist[i] = parseInt(this.pagelist[i])
            }

        }
    },
    methods:{
        start:function () {
            //修改按钮颜色
            document.getElementsByClassName("start-btn")[0].style.color = "#1E9FFF"
            document.getElementsByClassName("stop-btn")[0].style.color = "#d2d2d2"

            let back = 0
            let back1 = 0
            let back2 = 0
            let back3 = 0
            let timecounter = []
            let timecounter1 = []
            let timecounter3 = []
            let visitcounter = []
            this.counts = [0,0,0,0]
            this.fifoblocknumlist = []
            this.lrublocknumlist = []
            this.lfublocknumlist = []
            this.optblocknumlist = []
            for (let i = 0; i < this.blocknum; i++){
                this.fifoblocknumlist.push("")
                this.lrublocknumlist.push("")
                this.lfublocknumlist.push("")
                this.optblocknumlist.push("")
            }
            let blocks = document.getElementsByClassName("block")
            for(let m = 0; m < blocks.length; m++){
                blocks[m].style.backgroundColor = "#e2e2e2"
            }
            let sortpagelist = this.pagelist.slice(0).sort(function (a,b) {
                return a - b
            })
            //对sortpagelist去重
            let allpagelist = []
            for(let sortpage of sortpagelist){
                if(allpagelist.indexOf(sortpage) == -1){
                    allpagelist.push(sortpage)
                    visitcounter.push(0)
                }
            }



            for(let i = 0; i < this.blocknum; i++){
                timecounter.push(0)
                timecounter1.push(0)
                timecounter3.push(0)

            }
            var that = this
            for(let d = 0; d < this.pagelist.length; d++){
                (function (a) {
                    setTimeout(function () {
                        //LRU算法
                        let used = that.lrublocknumlist.indexOf(that.pagelist[d])
                        if(used == -1){ //页面不在内存块中
                            if(back < that.blocknum){
                                for(let k = 0; k < back + 1; k++){
                                    timecounter[k] += 1
                                }
                                that.lrublocknumlist[back] = that.pagelist[d]
                                back++
                                that.lruvisitinfo = that.pagelist[d]
                                that.lruvisitinfo2 = "缺页"
                                document.getElementsByClassName("lrublock")[back - 1].style.backgroundColor = "#b3b3b3"

                            }else{ //发生页面置换

                                let max = Math.max(...timecounter);
                                let indexOfMax = timecounter.indexOf(max);
                                that.lruvisitinfo = that.pagelist[d]
                                that.lruvisitinfo2 = "缺页，" + that.lrublocknumlist[indexOfMax] +"号页被置换成" + that.pagelist[d] + "号页"
                                for(let k = 0; k < back; k++){
                                    timecounter[k] += 1
                                }
                                timecounter[indexOfMax] = 1
                                that.lrublocknumlist[indexOfMax] = that.pagelist[d]
                                let lrublocks = document.getElementsByClassName("lrublock")
                                for(let m = 0; m < lrublocks.length; m++){
                                    lrublocks[m].style.backgroundColor = "#b3b3b3"
                                }
                                lrublocks[indexOfMax].style.backgroundColor = "#777777"

                            }
                            that.counts[1] ++
                        }else{ //页面在内存块中
                            for(let k = 0; k < back; k++){
                                timecounter[k] += 1
                            }
                            timecounter[used] = 1
                            that.lruvisitinfo = that.pagelist[d]
                            that.lruvisitinfo2 = "不缺页"
                            let lrublocks = document.getElementsByClassName("lrublock")
                            for(let m = 0; m < lrublocks.length; m++){
                                lrublocks[m].style.backgroundColor = "#b3b3b3"
                            }
                            lrublocks[used].style.backgroundColor = "#777777"
                        }
                        // console.log("访问" + that.lruvisitinfo)
                        // console.log("back="+back)
                        // console.log(that.lrublocknumlist)
                        // console.log(timecounter)


                        //FIFO算法
                        let used1 = that.fifoblocknumlist.indexOf(that.pagelist[d])
                        if(used1 == -1){ //页面不在内存块中
                            if(back1 < that.blocknum){
                                for(let k = 0; k < back1 + 1; k++){
                                    timecounter1[k] += 1
                                }
                                that.fifoblocknumlist[back1] = that.pagelist[d]
                                back1++
                                that.fifovisitinfo = that.pagelist[d]
                                that.fifovisitinfo2 = "缺页"
                                document.getElementsByClassName("fifoblock")[back1 - 1].style.backgroundColor = "#b3b3b3"
                            }else{ //发生页面置换

                                let max = Math.max(...timecounter1);
                                let indexOfMax = timecounter1.indexOf(max);
                                that.fifovisitinfo = that.pagelist[d]
                                that.fifovisitinfo2 = "缺页，" + that.fifoblocknumlist[indexOfMax] +"号页被置换成" + that.pagelist[d] + "号页"
                                for(let k = 0; k < back1; k++){
                                    timecounter1[k] += 1
                                }
                                timecounter1[indexOfMax] = 1
                                that.fifoblocknumlist[indexOfMax] = that.pagelist[d]

                                let fifoblocks = document.getElementsByClassName("fifoblock")
                                for(let m = 0; m < fifoblocks.length; m++){
                                    fifoblocks[m].style.backgroundColor = "#b3b3b3"
                                }
                                fifoblocks[indexOfMax].style.backgroundColor = "#777777"

                            }
                            that.counts[0] ++
                        }else{ //页面在内存块中
                            for(let k = 0; k < back1; k++){
                                timecounter1[k] += 1
                            }
                            that.fifovisitinfo = that.pagelist[d]
                            that.fifovisitinfo2 = "不缺页"
                                let fifoblocks = document.getElementsByClassName("fifoblock")
                            for(let m = 0; m < fifoblocks.length; m++){
                                fifoblocks[m].style.backgroundColor = "#b3b3b3"
                            }
                            fifoblocks[used1].style.backgroundColor = "#777777"

                        }
                        // console.log("访问" + that.fifovisitinfo)
                        // console.log("back="+back1)
                        // console.log(that.fifoblocknumlist)
                        // console.log(timecounter1)


                        //opt算法
                        let used2 = that.optblocknumlist.indexOf(that.pagelist[d])
                        if(used2 == -1){ //页面不在内存块中
                            if(back2 < that.blocknum){

                                that.optblocknumlist[back2] = that.pagelist[d]
                                back2++
                                that.optvisitinfo = that.pagelist[d]
                                that.optvisitinfo2 = "缺页"
                                document.getElementsByClassName("optblock")[back2 - 1].style.backgroundColor = "#b3b3b3"
                            }else{ //发生页面置换

                                //循环optblocknumlist数组，找到这里面的数分别在that.pagelist[d]数后再次出现的最小序号,选择最大的序号对应的数，应该淘汰他
                                //把that.pagelist[d]数字后面出现的数字重组为一个新的数组
                                let maxindex = 0
                                let blockindex = 0

                                if(d + 1 != that.pagelist.length){
                                    let laterArray = that.pagelist.slice(d+1)
                                    for(let j = 0; j < that.optblocknumlist.length; j++){
                                        let findindex = laterArray.indexOf(that.optblocknumlist[j])
                                        if(findindex > maxindex){
                                            maxindex = findindex
                                            blockindex = j
                                        }else if(findindex == -1){
                                            blockindex = j
                                            break
                                        }
                                    }
                                }
                                //最终应该淘汰blockindex对应的页面


                                that.optvisitinfo = that.pagelist[d]
                                that.optvisitinfo2 = "缺页，" + that.optblocknumlist[blockindex] +"号页被置换成" + that.pagelist[d] + "号页"
                                that.optblocknumlist[blockindex] = that.pagelist[d]

                                let optblocks = document.getElementsByClassName("optblock")
                                for(let m = 0; m < optblocks.length; m++){
                                    optblocks[m].style.backgroundColor = "#b3b3b3"
                                }
                                optblocks[blockindex].style.backgroundColor = "#777777"

                            }
                            that.counts[3] ++
                        }else{ //页面在内存块中

                            that.optvisitinfo = that.pagelist[d]
                            that.optvisitinfo2 = "不缺页"
                            let optblocks = document.getElementsByClassName("optblock")
                            for(let m = 0; m < optblocks.length; m++){
                                optblocks[m].style.backgroundColor = "#b3b3b3"
                            }
                            optblocks[used2].style.backgroundColor = "#777777"

                        }
                        // console.log("访问" + that.optvisitinfo + that.optvisitinfo2)
                        // console.log("back="+back2)
                        // console.log(that.optblocknumlist)

                        //lfu算法
                        let used3 = that.lfublocknumlist.indexOf(that.pagelist[d])
                        if(used3 == -1){ //页面不在内存块中
                            if(back3 < that.blocknum){
                                for(let k = 0; k < back3 + 1; k++){
                                    timecounter3[k] += 1
                                }

                                let pos = allpagelist.indexOf(that.pagelist[d])
                                visitcounter[pos] = 1


                                that.lfublocknumlist[back3] = that.pagelist[d]
                                back3++
                                that.lfuvisitinfo = that.pagelist[d]
                                that.lfuvisitinfo2 = "缺页"
                                document.getElementsByClassName("lfublock")[back3 - 1].style.backgroundColor = "#b3b3b3"

                            }else{ //发生页面置换

                                //找到访问频次最高的页面，如果有俩个页面访问频次相同且最高，lru
                                let temporaryvisitcounter = []
                                for(let temp of that.lfublocknumlist){
                                    let temppos = allpagelist.indexOf(temp)
                                    temporaryvisitcounter.push(visitcounter[temppos])
                                }


                                let minvisitnum = Math.min(...temporaryvisitcounter)
                                let mincounts = 0
                                let minvisitarray = []
                                for(let a = 0; a < temporaryvisitcounter.length; a++){
                                    if(temporaryvisitcounter[a] == minvisitnum){
                                        mincounts += 1
                                        minvisitarray.push(a)
                                    }
                                }
                                let indexOfMax = 0

                                if(mincounts == 1){
                                    indexOfMax = temporaryvisitcounter.indexOf(minvisitnum)
                                    console.log("最少访问次数"+minvisitnum+"第"+indexOfMax+"个")
                                }else{
                                    //按照LRU算法来, 而且应该比较在minvisitarray中的
                                    let usedtime = 0

                                    for(let minarr of minvisitarray){
                                        if(timecounter3[minarr] > usedtime){
                                            usedtime = timecounter3[minarr]
                                            indexOfMax = minarr
                                        }
                                    }
                                    console.log("按照LRU")
                                }

                                that.lfuvisitinfo = that.pagelist[d]
                                that.lfuvisitinfo2 = "缺页，" + that.lfublocknumlist[indexOfMax] +"号页被置换成" + that.pagelist[d] + "号页"
                                for(let k = 0; k < back3; k++){
                                    timecounter3[k] += 1
                                }
                                timecounter3[indexOfMax] = 1
                                let pos = allpagelist.indexOf(that.pagelist[d])
                                visitcounter[pos] += 1

                                that.lfublocknumlist[indexOfMax] = that.pagelist[d]
                                let lfublocks = document.getElementsByClassName("lfublock")
                                for(let m = 0; m < lfublocks.length; m++){
                                    lfublocks[m].style.backgroundColor = "#b3b3b3"
                                }
                                lfublocks[indexOfMax].style.backgroundColor = "#777777"

                            }
                            that.counts[2] ++
                        }else{ //页面在内存块中

                            //该页面的访问频次加一

                            let pos = allpagelist.indexOf(that.pagelist[d])
                            visitcounter[pos] += 1

                            for(let k = 0; k < back3; k++){
                                timecounter3[k] += 1
                            }

                            that.lfuvisitinfo = that.pagelist[d]
                            that.lfuvisitinfo2 = "不缺页"
                            let lfublocks = document.getElementsByClassName("lfublock")
                            for(let m = 0; m < lfublocks.length; m++){
                                lfublocks[m].style.backgroundColor = "#b3b3b3"
                            }
                            lfublocks[used3].style.backgroundColor = "#777777"
                        }
                        console.log("访问" + that.lfuvisitinfo + that.lfuvisitinfo2)
                        console.log("back="+back3)

                        console.log(that.lfublocknumlist)
                        console.log(timecounter3)
                        console.log(allpagelist)
                        console.log(visitcounter)
                        console.log("-----------")




                        if(d == that.pagelist.length - 1){
                            document.getElementsByClassName("start-btn")[0].style.color = "#d2d2d2"
                            document.getElementsByClassName("stop-btn")[0].style.color = "#FF5722"
                        }

                    }, that.timespan * 1000 * a);

                })(d)

            }

        },
        stop:function () {
            document.getElementsByClassName("start-btn")[0].style.color = "#d2d2d2"
            document.getElementsByClassName("stop-btn")[0].style.color = "#FF5722"
        }

    }
})
